<template>
	<li class="item" style="" v-for="item in data.slice(1)" :key="item.id">
		<a href="" target="_blank">
			<div class="images mb10">
				<img :src="item.thumb" alt="" />
			</div>
			<div class="info">
				<div class="type">
					<span class="span1">{{item.class_name}}</span>
					<span class="cda1a45 pl10 pr10">/</span>
					<span class="span2">{{item.created_at}}</span>
				</div>
				<h3>{{item.title}}</h3>
				<p v-html="item.content"></p>
			</div>
		</a>
	</li>
</template>

<script setup>
	import img from "../../assets/imgs/serviceimg2.jpg";
	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		}
	})
</script>

<style lang="less" scoped>
	.item {
		max-width: 210px;
		overflow: hidden;
		display: inline-block;
		.images{
			width: 210px;
			height: 140px;
			overflow: hidden;
		}
		.images img {
			display: block;
			width: 100%;
			height: 100%;
			transition: all 1s linear;
			&:hover{
				  transform: scale(1.2);
			}
		}

		a {
			p {
				line-height: 22px;
				color: #666666;
			}

			.info {
				h3 {
					font-size: 16px;
					line-height: 22px;
					margin-bottom: 15px;
				}
			}

			.type {
				margin-bottom: 15px;

				.span1 {
					color: #868686;
				}

				.span2 {
					color: #b3b3b3;
				}
			}
		}

		&:hover h3 {
			color: #da1a45;
		}
	}

	.pr10 {
		padding-right: 10px;
	}

	.mb10 {
		margin-bottom: 10px;
	}

	.pl10 {
		padding-left: 10px;
	}

	.mb20 {
		margin-bottom: 20px;
	}

	.cda1a45 {
		color: #da1a45;
	}

	a {
		text-decoration: none;
		color: #333;
	}
</style>